
import { useEffect, useRef, useState } from "react"
import { BanSupplier, GetSupplier } from "../../api/supplier"
import { Col, Row, Button, Input, Checkbox, Table, Tag, Pagination, Tooltip, Skeleton, message } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { GetAdmins,DeleteAdmin, banAdmin } from "../../api/admin";
/**
 * 
 * @returns 管理员主页
 */
const AdminIndex=()=>{
    document.info = [
        {
            title: "管理员",
            url: "/admin",
        }
      ]
    // 搜索框属性 start
    const { Search } = Input;
    const suffix = (
        <AudioOutlined
            style={{
                fontSize: 16,
                color: '#1677ff',
            }}
        />
    );

        /**
     * 分页数据
     */
        const [pages, setPage] = useState({
            page: 1,
            limit: 10,
            key: "",
            total: 0,
        });

        
    const navigate = useNavigate();

    //获取搜索框dom
    const myRef = useRef("");

    const onSearch = (value, _e, info) => {
        console.log(111111);
        setPage((pages) => ({ ...pages, key: value }));
    }

    //搜索框改变事件
    const onSearchData = () => {
        // setLike((likeSelect) => ({ ...likeSelect, key: myRef.current.input.value }));

        if (myRef.current.input.value == "" || myRef.current.input.value == null) {
            setPage((pages) => ({ ...pages, key: "" }));
        }
    }
    //搜索框属性 end



    /**
 * 表格数据
 */
    const [tableData, setData] = useState([]);
    //加载效果
    const [load, setLoad] = useState({
        loading: false,
        isFirst: true
    });

    //禁用/启用
    const isBan = async (id) => {
        setLoad((load) => ({ ...load, loading: true }));
        const res = await banAdmin({ id: id});
        if (res?.result === 0) {
            message.success(res?.message)
            getData();
        } else {
            message.error(res?.message);
            setLoad((load) => ({ ...load, loading: false }));
        }
    }








    const getData = async () => {
        setLoad((load) => ({ ...load, loading: true }));
        const data = await GetAdmins({ page: pages.page, limit: pages.limit, key: pages.key });
       
      
        if (data.result === 0) {
            data.data.data.map((d, i) => { return d.Index = i + 1 });
            setData(data.data);

            setPage((pages) => ({ ...pages, total: data.data.total }));
            setLoad((load) => ({ ...load, loading: false, isFirst: false }));
        }
    }
    useEffect(() => {
        getData();
    }, [pages.page, pages.limit, pages.key]);


    //删除管理员
    const deleteAdmin = async (props) => {
        setLoad((load) => ({ ...load, loading: true }));
        const res = await DeleteAdmin({ id: props });
        if (res?.result === 0) {
            message.success(res?.message);
            getData();
        } else {
             setLoad((load) => ({ ...load, loading: false }));
            message.error(res?.message);
        }

    }

    //表格表头
    const columns = [
        {
            title: '序号',
            dataIndex: 'Index',
            key: 'Index',

        },
        {
            title: '账号',
            dataIndex: 'account',
            key: 'account',
            width:160,
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 200,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',
                        height: "51px"

                    }
                }
            },
        },
        {
            title: '姓名',
            dataIndex: 'name',
            key: 'name',
            width: 140,
        },
        {
            title: '超级管理员',
            dataIndex: 'isSuper',
            key: 'isSuperisSuper',
            render: (text) => {
                if(text===1){
                    return <Tag  className="primary-tag" color="blue" bordered={false}>是</Tag>
                }
                if(text===0){
                    return <Tag  className="info-tag" color="#eee" bordered={false}>否</Tag>
                }
            },
        },
        
       
        {
            title: '激活',
            dataIndex: 'isActive',
            key: 'isActive',
            render: (text) => (
                <div> {text === 0 ? <Tag color="red" className="danger-tag" bordered={false}>否</Tag> : <Tag color="green" className="success-tag" bordered={false}>是</Tag>}</div>
            ),
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            key: 'isBan',
            render: (text) => (
                <div> {text == 0 ? <Tag color="red" className="danger-tag" bordered={false}>否</Tag>:<Tag color="green" style={{ color: "#67c23a" }} bordered={false}>是</Tag> }</div>
            ),
        },
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
            render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>,
            onCell: () => {
                return {
                    style: {
                        maxWidth: 300,
                        overflow: 'hidden',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        cursor: 'pointer',

                    }
                }
            },
        },
        {
            title: '操作',
            dataIndex: '',
            key: '',
            fixed: "right",
            width: 225,
            render: (text, hang) => (
                <div style={{ width: 220 }}>
                   
                    {hang.isActive === 0 && <div style={{ marginLeft: "5px" }} className="danger-cell btn" onClick={() => { deleteAdmin(hang.id) }}> 删除</div>}
                    {hang.isActive === 1 && hang.isBan === 0 && <div style={{ marginLeft: "5px" }} className="danger-cell btn" onClick={() => { isBan(hang.id) }}> 禁用</div>}
                    {hang.isActive === 1 &&  hang.isBan === 1 && <div style={{ marginLeft: "5px" }} className="primary-cell btn" onClick={() => { isBan(hang.id) }}> 启用</div>}

                </div>
            ),
        },

    ];



    //分页改变事件
    const pageChange = (props) => {
        setPage((pages) => ({ ...pages, page: props }));
    }
    
    //去新增
    const goAdd=()=>{
           navigate("/admin/add");
    }


    return (
        <div className="Containers">

            <Skeleton active loading={load.isFirst} paragraph={{ rows: 15 }}>

                <div className="goodsIndexContainer">
                    <div className="good-head">
                        <div><Button type="primary"
                          onClick={()=>{goAdd()}}>新增管理员</Button></div>


                        <div>
                            <Search
                                placeholder="姓名/账号"
                                onSearch={onSearch}
                                onChange={(e) => onSearchData(e)}
                                allowClear
                                ref={myRef}
                                style={{
                                    width: 500,
                                }}
                            />
                        </div>


                        <div></div>
                    </div>



                    <div className="good-data">

                        <Table dataSource={tableData.data} columns={columns} bordered pagination={false} loading={load.loading}
                            style={{ marginTop: "10px" }}
                            scroll={{
                                y: "405px",
                                x: "1200px"
                            }} />

                        <div className="page-layout">
                            <Pagination defaultCurrent={1} total={pages.total} onChange={(value) => { pageChange(value) }} />
                        </div>
                    </div>
                </div>

            </Skeleton>

        </div>
    )
}


export default AdminIndex